<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuejs</title>
<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<input v-model="inputValue" />
		<button @click="onSub">button</button>
		<ul>
			<!-- <li v-for="(item, index) of list">{{item}}</li> -->
			<item-dolist v-for="(item,index) of list" :key="index" :content="item" :index=index @delete="handleDelete">{{item}}<item-dolist>
		</ul>
	</div> 
<script>
	/*
	实例和组件的关系
	每一个组件都是一个vue实例
	*/
	Vue.component("item-dolist",{
		props:['content','index'],
		template:'<li @click="handleClick">{{content}}{{index}}</li>',
		methods:{
			handleClick: function(){
				//alert(this.index);
				this.$emit('delete', this.index);
			},
		},
	});
	new Vue({~
		el:'#root',
		data:{
			inputValue:'',
			list:[],
		},
		methods: {
			onSub:function(){
				this.list.push(this.inputValue);
				this.inputValue = '';
			},
			handleDelete: function(index){
				// alert('delet');
				this.list.splice(index,1);
			},
		}
	});
</script>
</body>
